<template>
  <div class="announcement-page">
    <el-row class="main-layout" :gutter="10">
      <!-- 左侧：所有公告 -->
      <el-col :span="12" class="left-panel">
        <el-card shadow="always" class="announcement-card">
          <!-- 搜索栏 -->
          <div class="search-bar">
            <el-form :inline="true" :model="queryParams" size="small" label-width="60px" @submit.native.prevent>
              <el-form-item label="标题">
                <el-input
                  v-model="queryParams.title"
                  placeholder="请输入公告标题"
                  clearable
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 公告表格 -->
          <el-table
            class="announcement-table"
            :data="projectAnnouncementList"
            v-loading="loading"
            @selection-change="handleSelectionChange"
            @row-click="(row)=>{currentAnnouncement = row;this.showAnnouncementValue = true}"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column label="项目公告ID" prop="announcementId"/>
            <el-table-column label="公告标题" prop="title"/>
            <el-table-column label="公告发布时间" prop="announcementDate">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.announcementDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="createdBy">
              <template v-slot="scope">
                <user-and-avatar :userId="scope.row.createdBy"/>
              </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" prop="createdAt" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :limit.sync="queryParams.pageSize"
            :page.sync="queryParams.pageNum"
            :total="total"
            @pagination="getList"
          />
        </el-card>
      </el-col>

      <!-- 右侧：我的公告 -->
      <el-col :span="12" class="right-panel">
        <el-card shadow="always" class="announcement-card">
          <div class="search-bar">
            <el-form :inline="true" :model="myQueryParams" size="small" label-width="60px" @submit.native.prevent>
              <el-form-item label="标题">
                <el-input
                  v-model="myQueryParams.title"
                  placeholder="请输入公告标题"
                  clearable
                  @keyup.enter.native="myHandleQuery"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="myHandleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="myResetQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <div class="right-button">
              <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新增公告</el-button>
            </div>
          </div>
          <el-table
            class="announcement-table"
            :data="myProjectAnnouncementList"
            v-loading="myLoading"
            @row-click="(row)=>{currentAnnouncement = row;this.showAnnouncementValue = true}"
          >
            <el-table-column label="项目公告ID" prop="announcementId"/>
            <el-table-column label="公告标题" prop="title"/>
            <el-table-column label="公告发布时间" prop="announcementDate">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.announcementDate, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="更新时间" prop="updatedAt">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.updatedAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column width="200px" align="center" class-name="small-padding fixed-width" label="操作">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-edit"
                  size="mini"
                  type="text"
                  @click.stop="handleUpdate(scope.row)"
                >修改
                </el-button>
                <el-button
                  icon="el-icon-delete"
                  size="mini"
                  type="text"
                  @click.stop="handleDelete(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="myTotal > 0"
            :limit.sync="myQueryParams.pageSize"
            :page.sync="myQueryParams.pageNum"
            :total="myTotal"
            @pagination="getMyList"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加/修改公告弹框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body width="500px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题"/>
        </el-form-item>
        <el-form-item label="公告内容">
          <editor v-model="form.content" :min-height="192"/>
        </el-form-item>
<!--        <el-form-item label="公告发布时间" prop="announcementDate">-->
<!--          <el-date-picker-->
<!--            v-model="form.announcementDate"-->
<!--            clearable-->
<!--            placeholder="请选择公告发布时间"-->
<!--            type="date"-->
<!--            value-format="yyyy-MM-dd"-->
<!--          />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="审核人ID" prop="reviewedBy">-->
<!--          <el-input v-model="form.reviewedBy" placeholder="请输入审核人ID"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="审核状态" prop="reviewStatus">-->
<!--          <el-select v-model="form.reviewStatus" placeholder="请选择审核状态">-->
<!--            <el-option-->
<!--              v-for="dict in dict.type.review_status"-->
<!--              :key="dict.value"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 公告详情弹窗 -->
    <el-dialog
      :visible.sync="showAnnouncementValue"
      title="公告详情"
      width="600px"
    >
      <div>
        <h3>{{ currentAnnouncement.title }}</h3>
        <p>
          <strong>发布时间：</strong>{{ formatDateDay(currentAnnouncement.announcementDate) }}</p>
        <p style="display: flex;align-items: center;gap: 8px;">
          <strong>添加人：</strong>
          <user-and-avatar :user-id="currentAnnouncement.createdBy"></user-and-avatar>
        </p>
        <hr/>
        <div class="content-box" v-html="currentAnnouncement.content"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAnnouncementValue = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  addProjectAnnouncement,
  delProjectAnnouncement,
  getProjectAnnouncement,
  listMyProjectAnnouncement,
  listProjectAnnouncement,
  updateProjectAnnouncement
} from "@/api/projectUser/userProjectAnnouncement";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import {formatDateDay} from "../../../../utils/ruoyi";

export default {
  name: "UserProjectAnnouncement",
  components: {UserAndAvatar},
  dicts: ['review_status'],
  data() {
    return {
      showAnnouncementValue: false,
      currentAnnouncement: {},
      loading: true,
      myLoading: true,
      ids: [],
      single: true,
      multiple: true,
      total: 0,
      myTotal: 0,
      projectAnnouncementList: [],
      myProjectAnnouncementList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        title: null
      },
      myQueryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: null
      },
      form: {},
      rules: {
        title: [{required: true, message: "公告标题不能为空", trigger: "blur"}],
        content: [{required: true, message: "公告内容不能为空", trigger: "blur"}],
        reviewStatus: [{required: true, message: "审核状态不能为空", trigger: "change"}]
      }
    };
  },
  props: {
    projectId: {
      type: [String, Number]
    }
  },
  created() {
    this.getList();
    this.getMyList()
  },
  methods: {
    formatDateDay,
    cancel(){},
    getList() {
      this.loading = true;
      listProjectAnnouncement(this.projectId, this.queryParams).then(response => {
        this.projectAnnouncementList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getMyList() {
      this.myLoading = true;
      listMyProjectAnnouncement(this.projectId, this.myQueryParams).then(response => {
        this.myProjectAnnouncementList = response.rows;
        this.myTotal = response.total;
        this.myLoading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    myHandleQuery() {
      this.myQueryParams.pageNum = 1;
      this.getMyList();
    },
    resetQuery() {
      this.queryParams={
        pageNum: 1,
          pageSize: 10,
          projectId: null,
          title: null
      }
      this.handleQuery();
    },
    myResetQuery() {
      this.myQueryParams={
        pageNum: 1,
        pageSize: 10,
        projectId: null,
        title: null
      }
      this.myHandleQuery();
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.announcementId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handleAdd() {
      this.open = true;
      this.title = "添加项目公告";
    },
    handleUpdate(row) {
      const id = row.announcementId || this.ids;
      getProjectAnnouncement(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改项目公告";
      });
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.announcementId) {
            updateProjectAnnouncement(this.form).then(() => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.getMyList()
            });
          } else {
            addProjectAnnouncement(this.projectId, this.form).then(() => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              this.getMyList()
            });
          }
        }
      });
    },
    handleDelete(row) {
      const id = row.announcementId || this.ids;
      this.$modal.confirm(`是否确认删除项目公告编号为"${id}"的数据项？`).then(() => {
        return delProjectAnnouncement(id);
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
        this.getList();
      });
    }
  }
};
</script>

<style scoped>
.announcement-page {
  height: 80vh;
  box-sizing: border-box;
  overflow: hidden;
}

.main-layout {
  height: 100%;
}

.left-panel,
.right-panel {
  height: 100%;
  display: flex;
}

.announcement-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.search-bar,
.top-bar {
  height: 50px;
  display: flex;
}

.right-button {
  margin-left: auto;
}

.announcement-table {
  flex: 1;
  overflow: auto;
  padding: 0 20px 20px;
}

.fixed-width.small-padding {
  padding: 0 5px;
}

.dialog-footer {
  text-align: right;
  padding: 10px 0;
}
</style>
